<template>
    <div class="root">
        姓名:<span>{{ person.name }}</span><br>
        年龄:<span>{{ person.age }}</span><br>
        <button @click="addAge">点我变老一岁</button>
        <button @click="changeName">点我解放{{ person.name }}</button>
        <br>
        <span>{{ qidongName }}</span>
        <button @click="qidong">点我</button>
    </div>

</template>

<script lang="ts" setup>
import {ref, watch} from 'vue'

let person = ref({
    name: "赵博",
    age: 2,
})

let qidongName = ref(person.value.name + "，启动！！！")

function addAge() {
    person.value.age += 1
}

function changeName() {
    if (person.value.name != "赵博") {
        person.value.name = "赵博"
    } else {
        person.value.name = "高梓竣"
    }
}

function qidong() {
    let random = Math.random()
    if (random > 0.5) {
        alert("启动成功！！！")
    } else {
        alert("启动失败！！！")
    }
}


watch(person, (value) => {
        qidongName.value = value.name + "，启动！！！"
        console.log(value);
    }, {deep: true}
)
</script>

<style scoped>
.root {
    background-color: rgb(126, 228, 208);
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>